<template>
	<view class="u-page">
		<nav-bar title="用车记录详情" :show-right-icon="false"></nav-bar>
		<view class="u-page__item">

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="申请人信息">
					<view class="u-page__item__list">
						<text>单位</text>
						<text class="u-page__item__list__title">{{unitObject.usercompanyname}}</text>
					</view>
					<view class="u-page__item__list">
						<text>部门</text>
						<text class="u-page__item__list__title">{{unitObject.usercompanyname}}</text>
					</view>
					<view class="u-page__item__list">
						<text>用车人</text>
						<text class="u-page__item__list__title">{{unitObject.usemanname}}</text>
					</view>
					<view class="u-page__item__list">
						<text>联系电话</text>
						<text class="u-page__item__list__title">{{unitObject.usemantel}}</text>
					</view>
					<view class="u-page__item__list">
						<text>用车人数</text>
						<text class="u-page__item__list__title">{{unitObject.usemancount}}</text>
					</view>
				</up-collapse-item>
			</up-collapse>

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="行程信息">
					<view class="u-page__item__list">
						<text>出发地</text>
						<text class="u-page__item__list__title">{{unitObject.usebeginaddress}}</text>
					</view>
					<view class="u-page__item__list">
						<text>目的地</text>
						<text class="u-page__item__list__title">{{unitObject.useendaddress}}</text>
					</view>
					
					<view class="u-page__item__list">
						<text>开始时间</text>
						<text class="u-page__item__list__title">{{unitObject.usebegindate}}</text>
					</view>
					<view class="u-page__item__list">
						<text>结束时间</text>
						<text class="u-page__item__list__title">{{unitObject.useenddate}}</text>
					</view>

				</up-collapse-item>
			</up-collapse>

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="其他申请信息">
					<view class="u-page__item__list">
						<text>车辆类型</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>是否需要司机</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>是否需要结算</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>结算方式</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>用车平台</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>用车事由</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>备注</text>
						<text class="u-page__item__list__title">5人2人张云0371-65897854</text>
					</view>
				</up-collapse-item>
			</up-collapse>
			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="审核信息">
					<view class="u-page__item__list">
						<text>审核结果</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>审核人</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>审核时间</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
				</up-collapse-item>
			</up-collapse>
			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="审批信息">
					<view class="u-page__item__list">
						<text>审批结果</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>审批人</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>审批时间</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
				</up-collapse-item>
			</up-collapse>
			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="调度信息">
					<view class="u-page__item__list">
						<text>调度员</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>调度车辆</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>调度时间</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
				</up-collapse-item>
			</up-collapse>
			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="费用信息">
					<view class="u-page__item__list">
						<text>单位报销费用（元）</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>车辆使用费用（元）</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>过路费用（元）</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>变更费用（元）</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>需结算费用（元）</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>备注</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
				</up-collapse-item>
			</up-collapse>
			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="评价信息">
					<view class="u-page__item__list">
						<text>司机评价</text>
						
						<uni-rate class="u-page__item__list__title" size="18" :value="5" />
					</view>
					<view class="u-page__item__list">
						<text>车辆评价</text>
						<uni-rate class="u-page__item__list__title" size="18" :value="5" />
					</view>
					<view class="u-page__item__list">
						<text>备注</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
				</up-collapse-item>
			</up-collapse>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { getSYListDetail } from '@/api/use';
	import NavBar from '@/components/NavBar.vue';
	// 申请id
	const unitId = ref('')
	//用车id
	const apid = ref('')
	//派单id
	const seid = ref('')
	const unitObject = ref({
		
	})
	// 通过事件通道获取单位id
	onLoad((option) => {
		unitId.value = option.id
		apid.value = option.apid
		seid.value = option.seid
		serverApplyDetail()
	})
	
	function serverApplyDetail(){
		let params = {
			id:unitId.value,
			apid:apid.value,
			seid:seid.value
		}
		getSYListDetail(params).then(res => {
			if(res.code === 1){
				unitObject.value = res.data;
			}else{
				
			}
		})
	}
</script>

<style lang="scss" scoped>
	.u-page {
		padding: 0;

		&__item {
			background-color: #fff;

			&__list {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				color: #797E84;
				font-size: 13px;

				&__title {
					color: #333;
					font-size: 14px;
				}
			}


			&__title {
				color: #333;
				background-color: #fff;
				padding: 15px;
				font-size: 15px;

				&__slot-title {

					font-size: 14px;
				}
			}

			&__table {
				&__item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px;
					flex: 1;

					&__left {
						color: #797E84;
						font-size: 13px;
					}

					&__right {
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #333;
						font-size: 14px;

						&__box {
							width: 40px;
							height: 40px;

							text-align: center;

						}
					}
				}
			}
		}
	}

	.u-collapse-content {

		font-size: 14px;
	}
</style>